<template>
  <div class="detail">
    <div class="detail-card">
      <div class="flex-row-start align-center">
        <img src="../assets/money.png" class="detail-card__icon m-r-10"/>
        <div class="text-30 text-bold">总资产（元）</div>
      </div>
      <div class="detail-card__price">{{ data.jf }}</div>
    </div>
    <van-cell-group :border="false">
      <!-- <van-cell title="手机号码" center size="large" :value="data.phone" title-class="text-32 text-666" value-class="text-32 text-333">
      </van-cell> -->
      <van-cell title="贡献值" center size="large" :value="data.gxz" title-class="text-32 text-666" value-class="text-32 text-333">
      </van-cell>
      <van-cell title="推荐人" center size="large" :value="data.tjr" title-class="text-32 text-666" value-class="text-32 text-333">
      </van-cell>
      <van-cell title="账户等级" center size="large" :value="data.userLevel" title-class="text-32 text-666" value-class="text-32 text-333">
      </van-cell>
      <!-- <van-cell left title-class="text-32 text-666" value-class="text-32 text-333">
        <van-button
          type="primary"
          class="apply-btn"
          @click="showApplyWithdraw = true"
        >提现申请</van-button>
      </van-cell> -->
    </van-cell-group>
    <!-- <van-action-sheet v-model:show="showApplyWithdraw" title="提现方式"  @select="onSelect">
        <my-account></my-account>
    </van-action-sheet> -->
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue';
import { UserInfo, ApplyWithdraw } from '@/config/api.js'
// import MyAccount from '@/views/myAccount'

import { showToast, showLoadingToast } from "vant"

let data = ref({})
const showApplyWithdraw = ref(false)

onBeforeMount(() => {
  loadData()
})

const loadData = ()=>{
    UserInfo().then(res => {
    data.value = res.user
  })
}

const applyWithdrawHandler = ({ id, payType }) => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  ApplyWithdraw({ id, payType }).then(() => {
    showToast('申请提现成功')
    loadData()
  }).catch(err => {
    showToast(err)
  })
}
const onSelect = (item, i) => {
      showApplyWithdraw.value = false;
      console.log(item, i+1)
      applyWithdrawHandler({id: '', payType: i+1})
};

const actions = [{name: '微信'}, {name: '支付宝'}, {name: '银行卡'}]

const filterPayType = (val) => {
  return ['', '微信', '支付宝', '银行卡'][+val]
}


</script>

<style scoped lang="less">
:root{
    --van-padding-md: 0;
}
/deep/.van-cell{
    padding-left: 0;
    padding-right: 0;
    &:after{
        left:0;
        right: 0;
    }
}
.m-r-10 {
  margin-right: 0.13rem;
}
.text-32{
    font-size: 0.43rem;
}
.text-666{
    color: #666;
}
.flex-row-start{
  display: flex !important;
  flex-flow: row;
  justify-content: flex-start;
}
.align-center{
  align-items: center;
}
.p-30 {
  padding: 0.40rem;
}
.detail{
    min-height: 100vh;
    background-color: white;
    padding: 0.40rem;
}
.detail-card{
  height: 3.35rem;
  background: url('../assets/bg.png') no-repeat;
  background-size:100% 100%;
  padding: 0.67rem 0.40rem;
  box-sizing: border-box;
  .detail-card__icon{
    width: 0.48rem;
    height: 0.48rem;
  }
  .detail-card__price{
    font-size: 1.01rem;
    font-family: DIN-Medium, DIN;
    font-weight: 500;
    color: #fff;
    margin-top: 0.27rem;
    line-height: 1.23rem;
  }
  .detail-card__title{
    font-size: 0.43rem;
    color: #666;
  }
  .detail-card__value{
    font-size: 0.43rem;
    color: #101D37;
  }
}
</style>